<template>
  <div class="home">
    <div class="loading" v-if="loading">
      <van-loading size="24px" vertical>加载中...</van-loading>
    </div>
    <!-- 背景图 -->
    <div class="activity-rules" id="activity-rules" v-else>
      <div class="activity-rules-title"></div>
      <div class="guize">
        <div class="guize-txt">
          <div class="guize-txt-png"></div>
          <!-- <img src="@/assets/images/activety_roules_text.png" style="width: 93%" /> -->
        </div>
      </div>
      <div class="footer">
        <div @click="handleClick" class="start-questions"></div>
      </div>
    </div>
    <div class="show-mc" v-if="showjoin">
      <div class="showZindex">
        <div class="show-close" @click="handleClickClose" />
      </div>
    </div>
  </div>
</template>

<script>
import { reqlogin } from '@/apis/home'
export default {
  name: 'LoadingPage',
  data() {
    return {
      loading: true,
      data: '',
      loginTime: '',
      userInfo: {
        is_join: '0',
        have_prize: '2'
      },
      zindextext: '参与过活动',
      showjoin: false
    }
  },
  mounted() {
    // document.getElementById('activity-rules').style.height = '' + window.screen.availHeight + 'px'
  },
  created() {
    // console.log(this.$route, this.$router)
    // this.init() // => 拿到了  data 和 loginTime   =>  用于免密登录   =>判断是否参加活动   (1分支, 参加不了了 返回),(2分支, 可以参加  =>跳转到规则页面   => 点击开始答题  =>  跳转到题目页面)
    //
    setTimeout(() => {
      console.log(11111)
      // this.loading = false
      // 免密登录
      this.init()
      // this.$router.push('/activityRules') // replace() back() go()
    }, 1000)
    // 请求 data， loginTime, =>判断  =>有  =>/ 免密登录 => 跳转  去答题  /  没有   跳转   =>（注册）
  }, //      活动规则 => 去答题
  methods: {
    handleClick() {
      this.$router.push({
        path: '/question'
      })
    },
    test() {
      // www.abc.com/huodong?data=XXXXXXXXXXXXX&loginTime= 1568188442080
      // =>data=XXXXXXXXXXXXX  , loginTime= 1568188442080
      // const path = this.$route.path // /huodong?data=XXXXXXXXXXXXX&loginTime= 1568188442080
      const path = '/huodong?data=XXXXXXXXXXXXX&loginTime=1568188442080'
      // path.split('?')[1]  =  'data=XXXXXXXXXXXXX&loginTime=1568188442080'
      //  path.split('?')[1].split('&')  = ['data=XXXXXXXXXXXXX', 'loginTime=1568188442080']
      path
        .split('?')[1]
        .split('&')
        .forEach(item => {
          const key = item.split('=')[0]
          const value = item.split('=')[1]
          if (key === 'data') {
            // localStorage.setItem('data', value)
            console.log(value)
            this.data = value
          } else if (key === 'loginTime') {
            // localStorage.setItem('loginTime', value)
            console.log(value)
            this.loginTime = value
          }
        })
    },
    async init() {
      const res = await reqlogin({
        data: 'xnSa19sbN4yq52BWV%2BHaatAMqJi%2FNBe43R0kec4ke3Uj%2B3cmKiK3OYaRDKNuCusfkvmlCGM3Dn840CgQWiWqxyEwmU2BngWxOIjf7rYiB9WFNKyECrtoBpigI09TzniJuK4ORl7VG7gaDlcX3aJoaPytIP5XxwxRuFM2QL%2FWCnc%3D',
        loginTime: '1667182687256'
      })
      if (res.data.status_code == 200) {
        this.loading = false
        const userInfo = res.data.data
        this.userInfo = userInfo
        //  储存到本地
        localStorage.setItem('user', JSON.stringify(userInfo))
        if (userInfo.is_end_activity == 1) {
          this.showjoin = true
          // this.zindextext = '很遗憾,本次活动已结束'
        } else {
          console.log('可以继续参加活动')
        }
      }
    },
    // 活动结束 -=>关闭弹窗  =>跳转
    handleClickClose() {
      this.showjoin = false
      console.log('活动结束 -=>关闭弹窗  =>跳转')
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="less" scoped>
.home {
  height: 100vh;
  // display: flex;
  // position: relative;
}
.show-mc {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.8);
  .showZindex {
    position: absolute;
    height: 187px;
    width: 330px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: url('@/assets/images/end_activity.png') no-repeat;
    background-size: 100% 100%;
    .show-close {
      position: absolute;
      top: 10px;
      right: 10px;
      height: 28px;
      width: 28px;
      background: url('@/assets/images/close.png') no-repeat;
      background-size: contain;
    }
  }
}
.loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  // .van-loading {
  //   .van-loading__spinner {
  //     height: 2rem;
  //     width: 2rem;
  //   }
  //   .van-loading__text {
  //     margin-left: 1rem;
  //     font-size: 1rem;
  //   }
  // }
}

.activity-rules {
  // position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  width: 100%;
  height: 100vh;
  background: url(@/assets/images/activety_roule_bgc@2x.png);
  .activity-rules-title {
    height: 10%;
    width: 100%;
    // background-color: pink;
    background: url('@/assets/images/activety_roule.png') no-repeat center;
    background-size: contain;
  }
  & .guize {
    // position: absolute;
    width: 80%;
    height: 75%;
    // flex: 1;
    // left: 2rem;
    // top: 20%;
    padding: 50px 0;

    box-sizing: border-box;
    background: url('@/assets/images/activety_roule_bgc_fff@2x.png') no-repeat;
    background-size: 100% 100%;
    .guize-txt {
      // background-color: pink;
      // width: 100%;
      padding: 0 50px;

      height: 100%;
      overflow-y: scroll;

      .guize-txt-png {
        height: 1460px;
        background: url('@/assets/images/activety_roules_text.png') no-repeat;
        background-size: 100%;
      }
    }
  }
  .footer {
    width: 100%;
    padding-right: 15px;
    .start-questions {
      // bottom: 0;
      // right: 8px;

      float: right;
      width: 160px;
      height: 56px;
      background: url('@/assets/images/answer_btn@2x.png') no-repeat;
      background-size: contain;
    }
  }
}
</style>
